<template>
    <l-page customClass="h-full flex flex-col" ref="page">
        <l-navbar title="业务员" :fixed="false"></l-navbar>

        <l-swiper class="h-full"
            :request="(data: Object) => authentication.salesman({ ...data, latitude: login.latitude, longitude: login.longitude })">
            <template #default="{ list }">
                <!-- <navigator url="/pages/credit-loans/location">
                    <view class="flex m-3">
                        <view
                            class="py-1 px-2 rounded-full bg-black bg-opacity-50 text-white text-xs flex items-center">
                            <view class="mr-1">{{ setting.currentRegion }}</view>
                            <u-icon name="arrow-down-fill" color="#fff"></u-icon>
                            <view class="mx-1">|</view>
                            <u-icon name="search" color="#fff" size="22"></u-icon>
                        </view>
                    </view>
                </navigator> -->
                <view class="panel flex items-center" v-for="item in list" :key="item.id">
                    <u-avatar :src="$imgBase + item.avatar" shape="square" size="70"></u-avatar>
                    <view class="flex-1 mx-3">
                        <view class="font-bold">{{ item.realname }}</view>
                        <view class="flex">
                            <u-tag text="实名认证" plain size="mini" type="success"></u-tag>
                        </view>
                        <u-rate :value="5" v-model="item.star" active-color="#ffc303" gutter="1" :allowHalf="true"
                            readonly></u-rate>
                        <!-- <view class="text-gray-400 text-sm flex">
                            <view>距离您：{{ item.distance }}km</view>
                        </view> -->
                    </view>
                    <l-button shape="circle" size="small" @tap="chose_sm(item)"> 选择TA </l-button>
                </view>
            </template>
        </l-swiper>
        <u-picker :show="show" :columns="[loan.productList]" keyName="name" @cancel="show = false"
            @confirm="changeHandler"></u-picker>
    </l-page>
</template>
<script setup lang="ts">
import Authentication from "@/stores/authentication"
import Login from "@/stores/login"
import Loan from "@/stores/loan"
import { reactive, ref } from "vue"
import { onLoad } from "@dcloudio/uni-app";
import Setting from '@/stores/settings'
const setting = Setting()
let authentication = Authentication(), login = Login(), loan = Loan(), show = ref(false), activeId: string;
const data = reactive({
    salesman_id: undefined,
    is_ysf: 0,
    loan_id: 0
})
onLoad((option: any) => {
    data.is_ysf = option.is_ysf
    data.loan_id = option.loan_id
})
const page = ref()
const chose_sm = (item: any) => {
    activeId = item.id
    if (!data.loan_id) {
        show.value = true
        return
    }
    page.value.dialog({
        content: `是否选择业务员:${item.realname}`,
        confirm: () => {
            data.salesman_id = item.id
            loan.chose_sm(data).then(res => {
                uni.navigateTo({
                    url: `/pages/application-record/${data.is_ysf == 1 ? 'ysf-detail' : 'detail'}?loan_id=${data.loan_id}&is_ysf=${data.is_ysf}`
                })
            })
        },
        cancel: () => { }
    })

}
const changeHandler = ({ value }: { value: any }) => {
    uni.navigateTo({
        url: value[0].link + '&salesman_id=' + activeId
    })
}
</script>